<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
import type { PropType } from 'vue';

import { computed, ref, toRefs, watch } from 'vue';

import { ElButton, ElDialog, ElSkeleton, ElSkeletonItem } from 'element-plus';

interface CatalogListData {
  id: string;
  name: string;
  type: string;
  updatedTime: string;
  createdTime: string;
  publishCount: number;
  downloadCount: number;
  ownerCount: number;
  previewCount: number;
  size: number;
}
const props = defineProps({
  isPreviewDialogShow: {
    type: Boolean,
    default: false,
  },
  previewSrc: {
    type: String,
    default: '',
  },
  resourceInfo: {
    type: Object as PropType<CatalogListData>,
    default: () => {},
  },
});

const emit = defineEmits(['closePreviewDialog', 'deletePdf']);
const { isPreviewDialogShow, previewSrc, resourceInfo } = toRefs(props);
const src = previewSrc.value;

const loading = ref(true);

const closePreviewDialog = () => {
  emit('closePreviewDialog');
};

watch([resourceInfo, src], () => {
  loading.value =
    !resourceInfo.value ||
    Object.keys(resourceInfo.value).length === 0 ||
    !src ||
    src.trim() === '';
});

const resourceSize = computed(() => {
  const size = resourceInfo.value?.size;
  return size
    ? (size < 1_048_576
      ? `${Math.ceil(size / 1024)}KB`
      : `${(size / 1024 / 1024).toFixed(2)}MB`)
    : '';
});
</script>

<template>
  <div>
    <ElDialog
      draggable
      v-model="isPreviewDialogShow"
      v-if="isPreviewDialogShow"
      width="auto"
      align-center
      @close="closePreviewDialog"
      :show-close="false"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <div class="header-text">
            <h2 :id="titleId" :class="titleClass" style="font-size: 25px">
              {{ resourceInfo?.name }}
            </h2>
          </div>
          <div class="header-button">
            <ElButton
              type="primary"
              @click="closePreviewDialog"
              size="large"
              text
              round
            >
              关闭
            </ElButton>
          </div>
        </div>
      </template>
      <div class="content-container">
        <div class="preview-section">
          <ElSkeleton :loading="loading" animated>
            <template #template>
              <ElSkeletonItem
                variant="rect"
                style="width: 100%; height: 100%"
              />
            </template>
            <iframe
              v-if="!loading"
              style="width: 100%; height: 100%"
              :src="src"
            ></iframe>
          </ElSkeleton>
        </div>
        <div class="details-section">
          <ElSkeleton :loading="loading" animated>
            <template #template>
              <p v-for="i in 6" :key="i">
                <ElSkeletonItem variant="text" />
              </p>
            </template>
            <template #default>
              <h3><strong>资源详情</strong></h3>
              <p><strong>资源名称:</strong> {{ resourceInfo?.name }}</p>
              <p><strong>资源类型:</strong> {{ resourceInfo?.type }}</p>
              <p><strong>创建时间:</strong> {{ resourceInfo?.createdTime }}</p>
              <p>
                <strong>最后更新时间:</strong> {{ resourceInfo?.updatedTime }}
              </p>
              <p><strong>资源大小:</strong> {{ resourceSize }}</p>
              <p><strong>资源拥有者:</strong> {{ resourceInfo?.ownerCount }}</p>
              <p>
                <strong>资源预览次数:</strong> {{ resourceInfo?.previewCount }}
              </p>
              <p>
                <strong>资源下载次数:</strong> {{ resourceInfo?.downloadCount }}
              </p>
              <p>
                <strong>资源发布次数:</strong> {{ resourceInfo?.publishCount }}
              </p>
              <p><strong>资源描述:</strong> 暂无</p>
            </template>
          </ElSkeleton>
        </div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped>
.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 20px;
  font-size: 20px;
}

:deep(.el-dialog__body) {
  padding-top: 5px;
  padding-bottom: 0;
}

:deep(.el-dialog__footer) {
  padding: 5px;
}

.content-container {
  box-sizing: border-box;
  display: flex;
  width: 60vw;
  height: 60vh;
}

.preview-section {
  flex: 1;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.details-section {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}
</style>
